<!--
	CommonLayout目前只有login/index.vue使用，但是根据ant design vue admin的“写法”就是这么干的，他没有多次复用。

	Layout api
		class Layout自带class ant-layout，用户传递的自定义class将于ant-layout合并；
		style 同时
		hasSider 服务端渲染时为了避免css闪动，大部分情况下这个值不用设置

	Layout.Header Layout.Footer Layout.Content API 与 Layout 相同，这段是文档原话，这说明在布局使用成本上还是非常低的。
		唯一有区别的将是后面的Layout.Sider。

	使用图片等资源
		按照webpack的习惯，
		import logo from ./../assets/logo.png
		使用时 <img v-bind:src="logo" ...
		但是此次我并没有这么写，使用相对路径webpack最终会将其转为require("./../assets/logo.png")，因为nodejs实现的commonjs风格，
		require(url)与import差不多，最终都是使用webpack file-loader功能。
-->
<template>
	<a-layout class="layout">
		<!-- 布局头 -->
		<a-layout-header class="layout-header">
			<div class="logo">
				<img src="../assets/logo_hoperun.png" width="160" alt="" />
				<span class="hoperun-title">ddd
					<img src="../assets/rhrj.png" width="110" alt="" />
				</span>
			</div>
		</a-layout-header>
		
		<a-layout-content>
			<slot></slot>		
		</a-layout-content>
		
		<!-- 布局页脚 -->
		<a-footer />
	</a-layout>
</template>
<script type="text/javascript">
import { 
	Layout 
} from 'ant-design-vue'
import AFooter from './AFooter.vue'
export default {
	name:"common-layout",		
	components:{
		ALayout:Layout,
		ALayoutHeader:Layout.Header,
		ALayoutContent:Layout.Content,
		AFooter		
	}
}
</script>
<style lang="less" scoped>
/** 
 * 1> 在最终的dom中class="layout ant-layout",后者有ming-height,只是还是使用这里定义的500px，这是因为scoped的原因，越精确的选择器优先级越高;
 * 2> 受孙多情影响,更重要是react和ant design,我也使用less，需要渐渐熟悉 	 
 */
.layout{  
	height: 100%; 
	background-color: white; 
	min-height: 500px;
	.layout-header{
		background-color: #002d56;
	}
}
</style>